<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="q1">
    <img src="bla.png" class="a1">
    <div class="a2"> Find Products</div>

    <div class="dropdown">
        <button onclick="myFunction()" class="dropbtn">下拉菜单</button>
        <div id="myDropdown" class="dropdown-content">
            <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
            <a href="#about">
                <a href="http://localhost:63342/untitled5/jidan.html?_ijt=s59ml75net6bpnc8sb697e279u&_ij_reload=RELOAD_ON_SAVE">
                    egg</a></a>
            <a href="#base">
                <a href="http://localhost:63342/untitled5/%E7%B1%BB%E7%9B%AE%E9%A1%B9.html?
                _ijt=5rmejcs05gi5u0bgs8inqoqij0&_ij_reload=RELOAD_ON_SAVE">Beverages</a></a>
            <a href="#blog">Apple</a>
            <a href="#contact">banner</a>
        </div>
    </div>





    <img src="绿色.png" class="j4">
    <img src="图1.png" class="j5">
    <div class="t1">Frash Fruits<br>
        & Vegetable</div>

    <img src="cc.png" class="k1">
    <img src="图2.png" class="k2">
    <div class="t2">Cooking Oil<br>
        & Ghee</div>

    <img src="302.png" class="k3">
    <img src="301.png" class="k4">
    <div class="t3">Meat & Fish</div>

    <img src="401.png" class="k5">
    <img src="402.png" class="k6">
    <div class="t4">Bakery & Snacks</div>

    <img src="501.png" class="k7">
    <img src="502.png" class="k8">
    <div class="t5">Dairy & Eggs</div>

    <img src="601.png" class="k9">
    <img src="602.png" class="k10">
    <div class="t6">Beverages</div>

    <img src="002.png" class="u1">
    <img src="001.png" class="u2">

    <p class="pos_fixed">
        <a href="http://localhost:63342/untitled5/%E9%A6%96%E9%A1%B5.html?_ijt=jp5tqce2i9t96a733qtjle4hk9&_ij_reload=RELOAD_ON_SAVE">
        <img src="个人主页.png" style="left: 20px;
top:10px;position:relative;">
        </a>

        <img src="搜索标签.png" style="left: 60px;
top:10px;position:relative;">

        <img src="购物车页面.png" style="left: 100px;
top:13px;position:relative;">

        <img src="收藏页面.png" style="left: 140px;
top:14px;position:relative;">

        <img src="个人主页.png" style="left: 180px;
top:14px;position:relative;">



    </p>


</div>
</body>







<style>

    /* 下拉菜单按钮 */
    .dropbtn {
        background-color: #dbeee3;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }

    /* 鼠标移动到下拉菜单按钮到样式*/
    .dropbtn:hover, .dropbtn:focus {
        background-color: white;
    }

    /* 搜索框 */
    #myInput {
        box-sizing: border-box;
        background-image: url('https://statiwww.jyshare.com/images/mix/searchicon.png');
        background-position: 14px 12px;
        background-repeat: no-repeat;
        font-size: 16px;
        padding: 14px 20px 12px 45px;
        border: none;
        border-bottom: 1px solid #ddd;
    }

    /* 搜索框获取焦点的样式 */
    #myInput:focus {outline: 3px solid #ddd;}

    /* 容器 <div> - 定位下拉菜单 */
    .dropdown {
        position: relative;
        display: inline-block;
    }

    /* 下拉菜单内容 (默认隐藏) */
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f6f6f6;
        min-width: 230px;
        border: 1px solid #ddd;
        z-index: 1;
    }

    /* 下拉菜单链接样式 */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    /* 鼠标移动到链接上的样式 */
    .dropdown-content a:hover {background-color: #f1f1f1}

    /* 显示下拉菜单 (使用 JS 添加 .dropdown-content 类) */
    .show {display:block;}


    .q1{
        left: -1366px;
        top: -813px;
        width: 414px;
        height: 896px;
        opacity: 1;
        background: rgba(255, 255, 255, 1);
        border: 1px solid antiquewhite;

    }
    .a1{
        left: -0.4px;
        top: 4.83px;
        width: 414px;
        height: 80px;
        opacity: 1;
    }
    .a2{
        left: 144px;
        top: 56.93px;
        width: 126px;
        height: 18px;
        opacity: 1;
        /** 文本1 */
        font-size: 20px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 18px;
        color: rgba(24, 23, 37, 1);
        text-align: left;
        vertical-align: middle;
        position: absolute;

    }
    .j1{
        left: 25.01px;
        top: 104.93px;
        width: 364px;
        height: 51.57px;
        opacity: 1;
        border-radius: 15px;
        background: rgba(242, 243, 242, 1);
        position: absolute;

    }
    .j2{
        left: 40.01px;
        top: 121.12px;
        width: 18.21px;
        height: 18.21px;
        opacity: 1;

position: absolute;
    }
    .j3{
        left: 68.02px;
        top: 123.32px;
        width: 83px;
        height: 17px;
        opacity: 1;
        /** 文本1 */
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 19.21px;
        color: rgba(124, 124, 124, 1);
        text-align: center;
        vertical-align: top;
        position: absolute;

    }
    .j4{
        left: 25.01px;
        top: 176.5px;
        width: 174.5px;
        height: 189.11px;
        opacity: 1;
        background: rgba(83, 177, 117, 0.1);
        position: absolute;
    }
.j5{
    left: 56.11px;
    top: 204.18px;
    width: 111.38px;
    height: 74.9px;
    opacity: 1;
    background: url(https://img.js.design/assets/img/616e27e7ca6a35018eaa3796.png#e3178427da26d961a06e45d74c64fbd1);
position: absolute;
}
.t1{
    left: 65.76px;
    top: 290px;
    width: 94px;
    height: 44px;
    opacity: 1;
    position: absolute;

    border: 0px solid rgba(83, 177, 117, 0.3);

    /** 文本1 */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 22px;
    color: rgba(24, 23, 37, 1);
    text-align: center;
    vertical-align: middle;

}
.k1{
    left: 214.51px;
    top: 176.5px;
    width: 174.5px;
    height: 189.11px;
    background: rgba(248, 164, 76, 0.1);
    position: absolute;
}
.k2{
    left: 255.38px;
    top: 193.66px;
    width: 93.13px;
    height: 93.13px;
    opacity: 1;
    background: url(https://img.js.design/assets/img/622ad46885c5ce7fd9788edd.png#91d9e9b7e61b5a7350c9a701fa7230f8);
position: absolute;
}
.t2{
    left: 257.76px;
    top: 290px;
    width: 88px;
    height: 44px;
    opacity: 1;
    position: absolute;

    border: 0px solid rgba(255, 255, 255, 1);

    /** 文本1 */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 22px;
    color: rgba(24, 23, 37, 1);
    text-align: center;
    vertical-align: middle;

}
.k3{
    left: 25.51px;
    top: 380.61px;
    width: 174.5px;
    height: 189.11px;
    background: rgba(247, 165, 147, 0.25);
    position: absolute;
}
.k4{
    left: 61.69px;
    top: 412.39px;
    width: 102.13px;
    height: 72.69px;
    opacity: 1;
    background: url(https://img.js.design/assets/img/622ad477cde90af8da56c272.png#26097618b5e8b34075f10983765952ef);
position: absolute;
}
.t3{
    left: 68.76px;
    top: 500px;
    width: 88px;
    height: 22px;
    opacity: 1;

    border: 0px solid rgba(255, 255, 255, 1);

    /** 文本1 */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 22px;
    color: rgba(24, 23, 37, 1);
    text-align: center;
    vertical-align: middle;
position: absolute;
}
.k5{
    left: 214.51px;
    top: 380.61px;
    width: 174.5px;
    height: 189.11px;
    background: rgba(211, 176, 224, 0.25);
    position: absolute;
}
.k6{
    left: 253.87px;
    top: 411.35px;
    width: 95.77px;
    height: 70.77px;
    opacity: 1;
    background: url(https://img.js.design/assets/img/622ad469cde90a334756c250.png#da98cc7b954de1971fef13f995c7608e);
position: absolute;
}
.t4{
    left: 239.26px;
    top:500px;
    width: 125px;
    height: 22px;
    opacity: 1;
    position: absolute;

    border: 0px solid rgba(255, 255, 255, 1);

    /** 文本1 */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 22px;
    color: rgba(24, 23, 37, 1);
    text-align: center;
    vertical-align: middle;

}
.k7{
    left: 25.51px;
    top: 584.71px;
    width: 174.5px;
    height: 189.11px;
    background: rgba(253, 229, 152, 0.25);
    position: absolute;

}
.k8{
    left: 61.69px;
    top: 615.88px;
    width: 102.13px;
    height: 67.92px;
    opacity: 1;
    background: url(https://img.js.design/assets/img/622ad47285c5ceee5f788f1a.png#4939a69cc1f358e5a0edfeb22abad5c8);
position: absolute;
}
.t5{
    left: 64.26px;
    top: 700px;
    width: 97px;
    height: 22px;
    opacity: 1;
    position: absolute;

    border: 0px solid rgba(255, 255, 255, 1);

    /** 文本1 */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 22px;
    color: rgba(24, 23, 37, 1);
    text-align: center;
    vertical-align: middle;

}
    .k9{
        left: 214.51px;
        top: 584.71px;
        width: 174.5px;
        height: 189.11px;
        background: rgba(183, 223, 245, 0.25);
        position: absolute;

    }
    .k10{
        left: 249.77px;
        top: 611.75px;
        width: 103.05px;
        height: 76.19px;
        opacity: 1;
        background: url(https://img.js.design/assets/img/622ad46c65f61886396ceeba.png#903b4818c459eceea5ed1a54e3afbcd5);
position: absolute;
    }
    .t6{
        left: 261.26px;
        top: 700px;
        width: 81px;
        height: 22px;
        opacity: 1;
position: absolute;
        border: 0px solid rgba(255, 255, 255, 1);

        /** 文本1 */
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.1px;
        line-height: 22px;
        color: rgba(24, 23, 37, 1);
        text-align: center;
        vertical-align: middle;

    }
    .u1{
        left: 25.51px;
        top: 788.82px;
        width: 174.5px;
        height: 130px;
        background: rgba(131, 106, 246, 0.15);
        position: absolute;

    }
    .u2{
        left: 214.51px;
        top: 788.82px;
        width: 174.5px;
        height: 130px;
        background: rgba(215, 59, 119, 0.15);
        position: absolute;

    }
    p.pos_fixed
    {
        position:fixed;
        top:600px;
        left: 7px;
        width: 408px;
        height: 80px;
        background-color: white;
        border: 1px solid antiquewhite;
    }

</style>
<script>
    /* 点击按钮设置下拉菜单的显示与隐藏 */
    function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }

    /* 搜索功能 */
    function filterFunction() {
        var input, filter, ul, li, a, i;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        div = document.getElementById("myDropdown");
        a = div.getElementsByTagName("a");
        for (i = 0; i < a.length; i++) {
            txtValue = a[i].textContent || a[i].innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                a[i].style.display = "";
            } else {
                a[i].style.display = "none";
            }
        }
    }
</script>
</html>